

// Tile, ReArrange


var MAXZINDEX = 0;

var VWindow = new Class({
    Implements: [Options, Events],
    options: {
        'autoShow': true,
        'parentId': null,
        'idPostfix': 'vw',
        'styles': null,
        'dockId': null,
        'url': null,
        'mode': null, // 'iframe', 'ajax', 'element'
        'elementId': null, // only for 'element' mode
        'maskWindow': false,

        'titleRenderOrder': 'icon,text,close,max,min',
        'loadingHtml': '<img src="loading.gif" />',

        // features
        'closable': true,
        'minimizable': true,
        'maxmizable': true,
        'resizable': true,
        'draggable': true,
        'reloadable': false,

        // position & size
        'startPosition': { x: 100, y: 100 },
        'startAtCenter': true,
        'resetPosition': false,
        'sizeTarget': 'body', // 'body', 'wrapper', 'window'
        'width': 'auto',
        'height': 'auto',

        // element & style
        'vwClass': 'VW-window',
        'wrapperClass': 'VW-wrapper',
        'titleBarClass': 'VW-titleBar',
        'bodyBarClass': 'VW-bodyBar',
        'footerBarClass': 'VW-footerBar',
        'titleClass': 'VW-title',
        'iconClass': 'VW-icon',
        'closeClass': 'VW-close',
        'miniClass': 'VW-min',
        'maxClass': 'VW-max',
        'bodyClass': 'VW-body',
        'resizeClass': 'VW-resize',
        'iframeClass': 'VW-iframe',

        'onBeforeClose': $empty,
        'onAfterClose': $empty,
        'onBeforeHide': $empty,
        'onAfterHide': $empty,
        'onBeforeShow': $empty,
        'onAfterShow': $empty,
        'onBeforeRequest': $empty
    },

    // temp vars:
    'vwId': null,
    'parent': null,
    'root': null,
    'wrapper': null,
    'titleBar': null,
    'bodyBar': null,
    'bodyMsg': null,
    'footerBar': null,
    'icon': null,
    'text': null,
    'min': null,
    'max': null,
    'close': null,
    'resize': null,
    'drag': null,
    'frag': null,
    'dock': null,
    'dockIcon': null,
    'iframe': null,
    'owidth': null,
    'oheight': null,
    'ox': null,
    'oy': null,
    'loading': null,
    'status': null,

    initialize: function(_options) {

        this.setOptions(_options);
        if ($('vw_root_' + this.options.idPostfix)) {
            this.root.show();
            return;
        }

        MAXZINDEX = MAXZINDEX + 5;
        // Build UI
        this.vwId = 'vw_root_' + this.options.idPostfix;
        this.dock = $((this.options.dockId || document.body));
        this.parent = $((this.options.parentId || document.body));

        this.root = this.createEl('root').inject(this.parent).setStyle('z-index', MAXZINDEX)
                    .setStyles({ 'height': this.options.height, 'width': this.options.width });

        this.wrapper = this.createEl('wrapper').inject(this.root);

        this.titleBar = this.createEl('titleBar').inject(this.wrapper);

        this.bodyBar = this.createEl('bodyBar').inject(this.wrapper);

        if (this.options.mode == 'iframe') {
            this.iframe = this.createEl('iframe').inject(this.bodyBar);
        }

        this.footerBar = this.createEl('footerBar').inject(this.wrapper);

        var a = this.options.titleRenderOrder.split(',');

        for (var i = 0; i < a.length; i++) {
            this.createEl(a[i]).inject(this.titleBar);
        }

        if (this.options.resizable) {
            this.resize = this.createEl('resize').inject(this.footerBar);
            this.resize = this.root.makeResizable({ handle: this.resize });
        }

        if ($defined(this.options.url)) {
            if (this.options.mode != 'iframe') {
                // Set Loading Html And Show Immediately
                this.bodyBar.set('html', this.options.loadingHtml);
                this.show();
                // Request the content
                var r = new Request.HTML({
                    url: this.options.url,
                    method: 'get',
                    update: this.bodyBar
                });
                r.send();
            }
        } else {
            this.bodyMsg = this.createEl('bodyMsg', this.options.bodyHtml).inject(this.bodyBar);
        }


        if (this.options.draggable && this.titleBar) {
            //this.drag = new Drag.Move(this.root, { handle: this.titleBar });
            this.drag = this.root.makeDraggable({ handle: this.titleBar });
            this.frag = this.root.makeDraggable({ handle: this.footerBar });
        }

        
        //alert(this.root.get('html'));
        // Show UI
        var min = this.createEl('dockIcon', this.vwId);

        if (this.options.maskWindow) {
            var m = new MaskWindow({
                'containerId': this.vwId + '_bbar',
                'contentId': this.vwId + '_msg'
            });
        }

        this.setBodyBarSize();

		var s = new EShadow({'elementId': this.vwId});
        // Request Content
    },

    show: function() {
        MAXZINDEX = MAXZINDEX + 1;
        this.root.setStyle('z-index', MAXZINDEX + 1);
        this.root.show();
    },

    hide: function() {

    },

    distroy: function() {
        this.root.dispose();
        $(this.vwId + '_dicon').dispose();
    },

    restore: function() {
        this.bodyBar.setStyle('width', this.options.width).setStyle('height', this.options.height);
    },

    resize: function() {
        this.bodyBar.setStyle('width', 'auto');
        this.root.setStyle('padding', '10px');
        this.wrapper.setStyle('width', 'auto');
        this.root.setStyle('position', 'absolute');
        this.frag.detach();
        this.setBodyBarSize();
    },

    resizeFinish: function() {
        this.setBodyBarSize();
        this.frag.attach();
    },

    minimize: function() {
        this.root.hide();
    },

    maxmize: function() {
        if (!this.status) {
            var p = this.root.getCoordinates();

            this.owidth = this.bodyBar.getStyle('width');
            this.oheight = this.bodyBar.getStyle('height');
            this.ox = p.left;
            this.oy = p.top;

            this.makeMaxStyle(this.root.removeClass(this.options.vwClass));
            this.makeMaxStyle(this.wrapper.removeClass(this.options.wrapperClass));
            this.makeMaxStyle(this.bodyBar.removeClass(this.options.bodyBarClass));


            this.footerBar.hide();
            this.drag.detach();
            this.status = 'max';
            if (this.iframe)
                this.iframe.setStyle('height', '90%');

        } else {
            this.restoreStyle(this.root.addClass(this.options.vwClass));
            this.restoreStyle(this.wrapper.addClass(this.options.wrapperClass));
            this.restoreStyle(this.bodyBar.addClass(this.options.bodyBarClass));
            this.footerBar.show();
            this.root.setStyles({
                'position': 'absolute',
                'z-index': MAXZINDEX + 5,
                'left': this.ox,
                'top': this.oy
            });
            this.bodyBar.setStyles({
                'width': this.owidth,
                'height': this.oheight
            });

            this.drag.attach();
            this.status = null;
            if (this.iframe)
                this.iframe.setStyle('height', '100%');
        }
    },

    makeMaxStyle: function(e) {
        e.setStyles({
            'position': 'relative',
            'width': '100%',
            'height': 'auto',
            'padding': '0px',
            'border': '0px',
            'top': '0px',
            'left': '0px'
        });
        this.parent.setStyle('z-index', MAXZINDEX + 1);
    },

    restoreStyle: function(e) {
        e.removeProperty('style');
    },

    setBodyBarSize: function() {
        var r = this.root.getCoordinates();
        var wr = this.wrapper.getCoordinates();
        var t = this.titleBar.getCoordinates(this.root);
        var f = this.footerBar.getCoordinates();
        var h = r.height - 2 * (t.top + t.height);

        //alert(t.top);
        //alert(r.height - 2 * (t.top + t.height));

        this.bodyBar.setStyle('height', h);
    },

    createEl: function(type, msg) {
        switch (type) {
            case 'bodyMsg':
                return new Element('div', {
                    'id': this.vwId + '_msg',
                    'class': this.options.bodyClass
                }).set('html', msg);
                return b;
            case 'loading':
                return new Element('div', {

            }).set('html', msg);
        case 'root':
            return new Element('div', {
                'id': this.vwId,
                'class': this.options.vwClass
            }).addEvent('mousedown', this.show.bind(this)).addEvent('mouseup', this.resizeFinish.bind(this));
        case 'wrapper':
            return new Element('div', {
                'class': this.options.wrapperClass
            });
        case 'titleBar':
            return new Element('div', {
                'class': this.options.titleBarClass
            }).addEvent('dblclick', this.restore.bind(this));
        case 'bodyBar':
            return new Element('div', {
                'id': this.vwId + '_bbar',
                'class': this.options.bodyBarClass
            });
        case 'iframe':
            return new Element('iframe', {
                'class': this.options.iframeClass,
                'src': this.options.url
            });
        case 'footerBar':
            return new Element('div', {
                'class': this.options.footerBarClass
            });

        case 'close':
            return new Element('div', {
                'class': this.options.closeClass
            }).addEvent('click', this.distroy.bind(this));
        case 'min':
            return new Element('div', {
                'id': 'vw_min_' + this.options.idPostfix,
                'class': this.options.miniClass
            }).addEvent('click', this.minimize.bind(this));
        case 'max':
            return new Element('div', {
                'class': this.options.maxClass
            }).addEvent('click', this.maxmize.bind(this));
        case 'text':
            return new Element('div', {
                'class': this.options.titleClass
            }).set('html', this.options.titleHtml);

        case 'icon':
            return new Element('div', {
                'class': this.options.iconClass
            }).addEvent('click', this.minimize.bind(this));
        case 'dockIcon':
            return this.dockIcon || new Element('div', {
                'id': this.vwId + '_dicon',
                'conid': this.vwId,
                'class': this.options.iconClass
            }).inject(this.dock).addEvent('click', this.show.bind(this));
        case 'resize':
            return new Element('div', {
                'class': this.options.resizeClass
            }).addEvent('mousedown', this.resize.bind(this));
    }
}



});